<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位小技巧1</title>
    <style>
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;/*固定定位的参照物是html*/
            top: 300px;
        }
        .left {
            background-color: #f00;
            left: 20px;
        }
        .right {
            background-color: #00f;
            right: 20px;
        }
        .top {
            background-color: lightgreen;
            height: 120px;
            color: green;
            font-size: 30px;
            position: fixed;
            top: 0;
            /*width: 100%;*/
            width: 100vw;
        }
        /*为了防止顶部条遮盖最上面的内容,可以给内容块设置一个上外间距向下移动*/
        .main {
            margin-top: 130px;
        }
    </style>
</head>
<body>
    <div class="top">我是顶部的广告条</div>
    <div class="left">我是左边的广告条</div>
    <div class="right">我是右边的广告条</div>
    <div class="main">
        <!-- lorem*70 Tab补全 -->
        <div>哈哈哈哈我是顶部的文字Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consectetur fuga minima pariatur quisquam
            totam? Dignissimos earum explicabo facere illo ipsum, maiores natus perferendis quos ratione repellendus,
            saepe sint ut.
        </div>
        <div>Aliquam aut delectus dignissimos dolorem doloremque eaque ipsa ipsum, perspiciatis provident reprehenderit
            repudiandae saepe veniam? Aliquid aperiam commodi debitis fugit harum in placeat porro quibusdam tempore
            temporibus? Beatae quam, repellendus?
        </div>
        <div>Consequuntur exercitationem expedita obcaecati quam! Alias deleniti, maxime non nostrum quia tenetur unde?
            Accusantium alias deserunt dolore harum illo illum in laboriosam minus nihil numquam officiis pariatur
            possimus, quibusdam quidem?
        </div>
        <div>Adipisci beatae illum in incidunt laudantium mollitia quam quis. Accusamus blanditiis, distinctio
            doloremque eius excepturi hic in laudantium magni minima possimus reiciendis, repellendus repudiandae
            veritatis! Eligendi expedita maiores quo rem.
        </div>
        <div>A autem commodi fugiat id ipsa labore libero molestiae mollitia nihil perspiciatis praesentium, quae quam
            quas quidem quis quo saepe sed similique sint tempore! Cupiditate dolorem doloribus odio perferendis quasi.
        </div>
        <div>Ad aliquid at facilis iure, laudantium libero molestiae nesciunt non nostrum nulla numquam placeat quod
            repudiandae sapiente sed? Aliquam aperiam assumenda, autem delectus enim esse minus possimus quo rem! Sunt.
        </div>
        <div>Accusamus aliquid aperiam atque dicta ea enim eum fuga fugiat fugit illo ipsum, iste iure libero molestiae
            nobis nostrum, odio pariatur porro praesentium quod saepe tempore vel veniam? Beatae, blanditiis.
        </div>
        <div>Aliquid aperiam cumque dicta dignissimos dolores ducimus error id illo impedit inventore ipsa ipsam itaque
            laboriosam magnam nam obcaecati omnis praesentium quam quibusdam quidem, quos rem, repudiandae similique,
            voluptate voluptatem?
        </div>
        <div>Dolore excepturi, minus. Animi at deserunt eaque fugit natus nisi sequi unde! Accusantium adipisci animi
            consequuntur cumque distinctio, magnam nam necessitatibus obcaecati, quibusdam, quo ratione sed similique
            tempora tenetur veniam.
        </div>
        <div>Accusantium adipisci deserunt dolorem dolores ea in ipsam laboriosam nihil odio optio perspiciatis placeat
            possimus quo, sapiente sint totam velit? Cumque delectus earum eos error minima omnis reiciendis ut veniam.
        </div>
        <div>Aliquid at blanditiis, ducimus ea eius et hic id labore maiores nisi numquam placeat saepe, tempora vel
            voluptatem. Delectus eos laborum officiis quae quasi, quos voluptatum? Dignissimos exercitationem in quasi.
        </div>
        <div>Esse, magnam, perspiciatis! At expedita ipsam ipsum sunt ut. Accusantium adipisci commodi, consequatur
            culpa cumque debitis eaque harum incidunt necessitatibus non nulla numquam quas quis quo reiciendis sed sit
            voluptatibus!
        </div>
        <div>Adipisci blanditiis eveniet fugiat nostrum porro, temporibus. Eius fugit vitae voluptates! Ab adipisci
            dolorem esse itaque libero, molestias natus non possimus quam quas reiciendis reprehenderit rerum ut
            veritatis voluptate voluptatibus.
        </div>
        <div>Consectetur eius et fuga? Ab ad aspernatur at culpa obcaecati, omnis perspiciatis quidem vero. Blanditiis
            consectetur ex, nostrum perferendis praesentium soluta voluptas. Aspernatur dolorum eius facilis incidunt
            neque quaerat, saepe.
        </div>
        <div>Ab autem commodi ea eius esse ex, id ipsam iure maxime officiis optio placeat quas quod rem rerum sit,
            tenetur! Accusantium consequatur debitis nam nobis quos sunt suscipit! Nulla, sunt!
        </div>
        <div>Quos recusandae, vitae! Cupiditate distinctio earum esse et harum itaque iure magnam nobis non odit
            officiis possimus quidem quisquam quo reprehenderit saepe similique sit soluta ullam ut veritatis voluptate,
            voluptates.
        </div>
        <div>Accusantium adipisci animi architecto aut beatae consectetur consequatur consequuntur dicta dignissimos,
            dolorem id iste magni quibusdam quo similique sit soluta temporibus, ullam, ut voluptatibus. Consequatur
            distinctio dolorum illo tenetur veniam.
        </div>
        <div>Aliquam, aperiam fuga iste iure repellendus rerum suscipit? Alias aliquid corporis dignissimos eaque eius
            eum expedita fugiat in necessitatibus officia perferendis porro rem rerum sequi sint totam, unde voluptate
            voluptatibus?
        </div>
        <div>Aperiam deserunt dolore, expedita facere impedit incidunt ipsum laboriosam magnam nostrum perspiciatis
            porro provident quam qui sed, totam, veniam voluptate. A accusantium consequuntur ipsum iure, maiores
            officia quia repudiandae temporibus?
        </div>
        <div>Ab adipisci deserunt eligendi esse exercitationem facilis harum iusto, magnam nam, nemo nihil quas
            recusandae repudiandae! Cum expedita facilis, impedit labore necessitatibus nesciunt optio quaerat,
            quibusdam quod reiciendis repudiandae, voluptates!
        </div>
        <div>Accusamus aperiam aut, beatae commodi corporis dolores ex id illo impedit in ipsa, itaque neque non
            perferendis provident quae rerum unde vero. Error exercitationem impedit laboriosam minima odio quod,
            suscipit.
        </div>
        <div>Eius ex, fugit id illo magnam nobis nostrum officia officiis possimus, quas quos rem similique suscipit?
            Culpa, cupiditate deleniti exercitationem iste iure molestiae neque quidem quisquam tempore voluptate.
            Possimus, quo!
        </div>
        <div>Accusantium adipisci animi blanditiis distinctio dolor ipsa placeat repudiandae. Amet aperiam earum fugiat
            harum illo ipsa odit? Eaque exercitationem facilis labore, maiores molestias natus perferendis, quibusdam,
            repudiandae tempora totam voluptatibus.
        </div>
        <div>Debitis eveniet quis reprehenderit sequi! Doloremque explicabo fugit hic iste itaque nulla ratione! Cumque
            debitis, eius enim eos esse eum hic id, molestiae nam obcaecati quos rem repellendus veniam voluptatem!
        </div>
        <div>A adipisci aut autem consequuntur deleniti deserunt dolor dolorum eaque error est fugit id illo, ipsum
            labore laborum molestias natus obcaecati officiis perspiciatis, quaerat quibusdam repellat suscipit, tempora
            velit voluptate?
        </div>
        <div>Aut consequatur cumque ea, necessitatibus officiis reiciendis suscipit? Aut culpa dolorum eius enim
            expedita explicabo, fugit magni, maxime natus nesciunt nihil nulla odio placeat, porro quasi reiciendis
            totam? Molestiae, totam?
        </div>
        <div>Ad amet asperiores, atque aut autem beatae consectetur delectus eligendi error est eum harum hic in ipsa
            ipsam labore laboriosam libero magnam nulla obcaecati omnis quis quo reprehenderit soluta temporibus.
        </div>
        <div>A aliquid at autem consequatur cupiditate delectus distinctio, dolores eaque eum eveniet ex excepturi,
            facilis, harum inventore ipsum itaque laborum optio qui quo ratione rerum tempore ullam unde ut veritatis.
        </div>
        <div>Aliquam autem delectus distinctio enim esse et eveniet facilis iste maiores nemo perferendis praesentium
            quas quasi quia quibusdam reiciendis repudiandae ullam vitae, voluptates, voluptatibus? Delectus laborum
            modi nisi perferendis ut?
        </div>
        <div>Animi architecto autem, illo ipsam laudantium magni, natus neque praesentium, sed sequi sint tenetur
            voluptatibus! Eum, iste, provident! Deleniti dolor ipsa laboriosam nisi nostrum quos repellat temporibus
            vitae voluptate voluptates.
        </div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores cupiditate enim eos incidunt ipsa
            nesciunt nisi provident quasi, ratione soluta tempora voluptatem? Autem consequatur eaque, harum nulla odio
            temporibus voluptatum.
        </div>
        <div>Exercitationem illum optio praesentium quo, ullam unde voluptatem? Blanditiis, deleniti esse laboriosam
            molestias omnis porro quas tenetur? Delectus dolor fuga sunt. Aliquam, cumque est fuga harum id in
            laudantium magnam?
        </div>
        <div>Ab alias autem eos explicabo, hic modi nulla qui repellendus reprehenderit temporibus velit voluptas
            voluptatem. Beatae cumque dolore enim et eveniet facere hic pariatur qui quia quis quod sapiente, tempore!
        </div>
        <div>Aperiam, corporis dolorem ducimus error facilis iste magnam, minima non odit optio praesentium quaerat
            reiciendis repellat, sint temporibus. Architecto aspernatur consectetur eaque, minus quos reiciendis saepe
            voluptate voluptatum. Laborum, quod!
        </div>
        <div>Alias delectus ducimus libero minima molestias praesentium repellendus similique vel, vero voluptatibus! Ab
            assumenda, at corporis dolore eum exercitationem itaque maxime minima molestias odit porro possimus quas
            sint. Doloribus, natus.
        </div>
        <div>Accusantium dolores fugit magnam! Explicabo fuga illum inventore itaque iure nihil officia quia quisquam
            reiciendis voluptate! Doloremque dolores eius est facilis labore natus, nesciunt nihil obcaecati pariatur,
            perspiciatis, possimus reprehenderit.
        </div>
        <div>Ab ad aliquam architecto assumenda atque, consectetur ex excepturi exercitationem facere facilis fugiat in
            ipsam, itaque, laborum necessitatibus nemo nesciunt numquam optio placeat porro quod ratione recusandae
            saepe suscipit tenetur.
        </div>
        <div>Consectetur dolorem eaque impedit ipsam possimus provident rem sapiente suscipit vel voluptates. Excepturi
            labore molestiae mollitia optio placeat rem. Dolor in ipsa quasi quidem quisquam, quos rem. Laborum, nulla,
            quibusdam?
        </div>
        <div>Ab accusantium amet aperiam at aut eligendi, est exercitationem laudantium libero nostrum, quae quaerat
            quis, ratione saepe temporibus. Amet at eum in iste mollitia quasi tenetur ut! Assumenda, delectus, ex!
        </div>
        <div>Accusamus illo inventore odit quasi. At fugiat nihil numquam omnis sint! Aliquid dignissimos, eaque est
            facere perferendis quaerat rerum voluptas! A dolores facilis nisi quasi. Commodi deleniti ex nam
            repellendus.
        </div>
        <div>Aliquam aspernatur assumenda cum dolores ea facilis inventore iste itaque minima natus omnis perferendis
            praesentium quae quasi quisquam rerum, sit, veniam voluptatem? Consectetur consequuntur, culpa dolorem
            exercitationem laborum nobis voluptatum.
        </div>
        <div>Asperiores, at beatae facere fugiat, fugit laborum maxime minus neque perferendis quam quis, reprehenderit
            similique. Corporis dicta eos laudantium maxime molestiae sapiente? Beatae eligendi illum, recusandae rem
            repellendus reprehenderit rerum!
        </div>
        <div>Alias autem culpa dignissimos eius error et fugit id laboriosam nulla praesentium, quos rerum ullam, vero?
            Ad animi dolor impedit ipsa molestiae necessitatibus nobis obcaecati officia, sint veritatis? Blanditiis,
            ratione.
        </div>
        <div>Atque commodi cum eligendi esse exercitationem facere fuga hic illum, impedit, inventore ipsam ipsum
            laboriosam nostrum quibusdam repellat tempore unde! Adipisci aspernatur cupiditate dolorum et id quas quasi
            reprehenderit veniam.
        </div>
        <div>Aspernatur eaque excepturi facere fuga illum in labore maiores minima nobis perferendis quisquam recusandae
            sint, sit soluta ut. Blanditiis corporis dolorem illo inventore ipsum nemo nostrum odio quod temporibus
            voluptatum.
        </div>
        <div>Explicabo laborum libero officiis quaerat unde. Accusantium, aliquam cum ea earum error ex, facilis fugit
            libero magni quisquam rem ullam! A asperiores excepturi maxime, nemo placeat quas recusandae saepe unde.
        </div>
        <div>Ad, assumenda, cumque deserunt distinctio dolores eius explicabo inventore iure minima odit officia quod
            reprehenderit sunt vel voluptas? Debitis dicta eaque harum numquam perferendis quaerat. Consequuntur
            dignissimos eligendi excepturi unde!
        </div>
        <div>Aliquam assumenda atque beatae consequatur corporis deleniti dignissimos dolore doloribus eos excepturi
            expedita, harum id illum iste laudantium libero maiores nemo praesentium quia ratione rem rerum ullam vel
            vero voluptate?
        </div>
        <div>Alias, aliquam dolorem ducimus, enim est laboriosam magni mollitia nemo qui quidem sint sit tempora,
            temporibus vitae voluptates! A adipisci cumque dicta incidunt nam, quia saepe? Consequatur enim laboriosam
            necessitatibus!
        </div>
        <div>Aspernatur cum dolorum, et explicabo harum ipsum libero natus non praesentium vero. Ab ad esse expedita
            explicabo, illum, libero necessitatibus neque nihil nostrum nulla quas quasi qui, repellendus tempore totam!
        </div>
        <div>Architecto commodi dolorem illo ipsam magni, quod reiciendis rerum! Et nostrum sapiente voluptatibus?
            Blanditiis cupiditate ea eaque error, explicabo facere fugiat molestiae nobis officiis provident repudiandae
            similique sit sunt veniam?
        </div>
        <div>Accusantium amet culpa dolor exercitationem facere fugit harum ipsam, maxime mollitia nihil nobis porro
            quisquam sint ullam voluptatem. Blanditiis fuga suscipit voluptatem! Accusamus aut, dolor itaque libero nam
            provident velit.
        </div>
        <div>Assumenda blanditiis ea earum provident quo, tempore? Adipisci doloremque esse nisi quidem quisquam
            reprehenderit vero? Accusamus amet, architecto consequuntur ducimus eos, iste laborum pariatur quod
            reprehenderit saepe vel voluptas, voluptatum!
        </div>
        <div>Dicta expedita explicabo optio quaerat repudiandae sint. Adipisci culpa dicta dolor dolores dolorum
            eligendi explicabo facilis itaque iure maxime nisi odit praesentium quae quod suscipit temporibus totam,
            vitae voluptates voluptatum.
        </div>
        <div>Animi cumque deleniti dicta ex expedita optio, quas, quos, rem velit voluptatem voluptates voluptatibus! At
            beatae commodi consectetur dolorem nesciunt nisi quisquam saepe voluptates. Ea est et inventore laudantium
            velit!
        </div>
        <div>Incidunt, iste, quae. A deserunt est ex impedit inventore molestias, nam, numquam quisquam similique sunt
            suscipit ullam, voluptatibus? Amet doloremque, eligendi expedita hic id incidunt placeat tempore totam
            voluptas! Aliquam?
        </div>
        <div>Ab aliquam culpa eum id illum laudantium magnam, maiores minima neque optio quasi voluptas voluptatem.
            Beatae illo iure magnam. Animi consectetur facere laudantium mollitia nihil quas quis quo suscipit tempore?
        </div>
        <div>A alias beatae ex illo nam optio quam rem similique. Adipisci at, beatae, corporis culpa harum hic illo
            illum iure labore magnam nobis nostrum quos reiciendis reprehenderit sint voluptate voluptates!
        </div>
        <div>A aliquid animi aut consequatur, debitis doloribus eaque eligendi in nobis non obcaecati officia quo, quod
            ratione sunt unde voluptatem! At beatae deserunt eius iure quod sit totam vel vero!
        </div>
        <div>Accusamus consequuntur cupiditate deserunt, dignissimos ducimus est expedita facere incidunt ipsum iure
            libero magnam, molestiae, natus nemo nostrum officia placeat quaerat qui quidem quos recusandae repellendus
            reprehenderit sequi soluta ullam.
        </div>
    </div>
</body>
</html>